<template>
  <div class="relative w-full h-full">
    <PageHeader title="轮播图管理" />
    <SearchCom
      :searchList="searchConfig"
      @search="handleSearch"
      @reset="handleReset"
    />
    <div class="mt12 toolbar flex_aic_jcsb">
      <div class="addBtn flex_aic_jcc" @click="editDiaVisible = true">
        <SvgIcon name="iconxinzeng" class="mr8" />
        <span>新增轮播图</span>
      </div>
    </div>
    <div
      class="mt12 flex_aic flex-wrap gap-10 w-full overflow-y-auto overflow-x-hidden"
      style="height: calc(100% - 200px)"
      ref="swiperBox"
    >
      <div class="swiperBox" v-for="(item, index) in tableData" :key="index">
        <div class="swiperBox-header flex_aic_jcsb pl20 pr20">
          <span>{{ item.title }}</span>
          <div class="flex_aic">
            <el-switch v-model="item.status" />
            <img class="edit-icon ml15" src="@/assets/images/common/edit.png" alt="" @click="handleEdit(item)" />
            <!-- <img class="edit-icon ml15" src="@/assets/images/common/draw.png" alt="" /> -->
            <img class="edit-icon ml15" src="@/assets/images/common/copy.png" alt="" />
            <img class="edit-icon ml15" src="@/assets/images/common/remove.png" alt="" />
          </div>
        </div>
        <swiper
          :modules="modules"
          :slides-per-view="1"
          :space-between="0"
          :pagination="{ clickable: true }"
          @swiper="onSwiper"
          @slideChange="onSlideChange"
          :autoplay="{ delay: 250000, disableOnInteraction: false }"
          :style="{ width: swiperWidth + 'px', height: 376 - 38 + 'px' }"
        >
          <swiper-slide
            class="swiperSlide w-full h-full flex_aic_jcc"
            v-for="item in item.items"
            :key="item.id"
          >
            <img class="swiperSlide-img" :src="item.img" alt="" />
          </swiper-slide>
        </swiper>
      </div>
    </div>

    <div class="flex justify-end mt24 absolute bottom-0 right-0">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 30, 40]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <EditDia v-model="editDiaVisible" :data="editDiaData"></EditDia>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import EditDia from "./editDia.vue";
import SearchCom from "@/components/searchCom.vue";
import { Swiper, SwiperSlide } from "swiper/vue";
import {
  Navigation,
  Pagination,
  Scrollbar,
  A11y,
  Autoplay,
} from "swiper/modules";
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/scrollbar";
import "swiper/css/autoplay";

const swiperBox = ref(null);
const swiperWidth = ref(0);
const searchConfig = ref([
  {
    label: "标题",
    prop: "title",
    type: "input",
  },
]);
const editDiaVisible = ref(false);
const editDiaData = ref({});
const currentPage = ref(1);
const pageSize = ref(10);
const modules = [Navigation, Pagination, Scrollbar, A11y, Autoplay];
const tableData = ref(
  Array(10).fill({
    id: 1,
    title: "消息标题",
    status: false,
    items: [
      {
        img: "https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png",
        url: "https://www.baidu.com",
        sort: 1,
      },
      {
        img: "https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png",
        url: "https://www.baidu.com",
        sort: 2,
      },
      {
        img: "https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png",
        url: "https://www.baidu.com",
        sort: 3,
      },
    ],
  })
);
const handleDelete = (row) => {
  console.log(row);
};
const handleEdit = (row) => {
  editDiaVisible.value = true;
  editDiaData.value = JSON.parse(JSON.stringify(row));
};
const handleSizeChange = (size) => {
  pageSize.value = size;
};
const handleCurrentChange = (page) => {
  currentPage.value = page;
};
onMounted(() => {
  swiperWidth.value = (swiperBox.value.clientWidth - 10) / 2;
});
</script>

<style lang="scss" scoped>
.toolbar {
  width: 100%;
  height: 42px;
  margin-bottom: 5px;
}
.addBtn {
  height: 28px;
  margin-left: 10px;
  padding: 0 7px;
  border-radius: 3px;
  background: #fff;
  cursor: pointer;
}
.swiperBox {
  width: calc((100% - 10px) / 2);
  height: 376px;
  border-radius: 13px;
  overflow: hidden;

  .edit-icon {
    width: 16px;
    height: 16px;
    cursor: pointer;
  }

  .swiperSlide {
    .swiperSlide-img {
      max-width: 100%;
      max-height: 100%;
      object-fit: cover;
    }
  }

  .swiperBox-header {
    height: 38px;
    background: #fff;
    border-radius: 13px 13px 0 0;
    background: #ebf3ff;
    // box-shadow: 2px 3px 9px #21110e42;
  }
  .swiper {
    background-color: rgb(245, 245, 245);
    .swiper-pagination-bullet-active {
      background-color: #fc7b0c !important;
    }
  }
}
</style>
